import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { NavController, NavParams, InfiniteScroll, Refresher, Content, Img } from 'ionic-angular';
import { Park } from '../../providers/park-data/park';
import { ParkDataProvider } from '../../providers/park-data/park-data';
import { updateImgs } from 'ionic-angular/components/content/content';
import { ParkDetailPage } from '../book-detail/park-detail';

// import { ParkDetailPage } from '../park-detail/park-detail';
// import { ParkMapPage } from '../park-map/park-map';

/**
 * Generated class for the ParkListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-park-list',
  templateUrl: 'park-list.html',
})
export class ParkListPage implements AfterViewInit {
  
@ViewChild(Content)_content:Content;

  parks: Park[]=[];

  private num:number=10;//每页显示的记录数
  private curPage:number=1;//当前页数

  private hasMore:boolean=true;//是否更多数据
  // private isSearch:boolean=true;

  constructor(public navCtrl: NavController, public navParams: NavParams,
     public parkDateProviter:ParkDataProvider) {
  }

  ionViewDidLoad() {
    this.getParks(this.num,this.curPage);
  }

  getParks(num:number,page:number):void{
    this.parkDateProviter.getParks(num,page).subscribe(parks=>{
      // this.parks=parks;
      // 保留原有数据
      if(parks.length>0){
        //合并数组
        this.parks=this.parks.concat(parks);
      }else{
        this.hasMore=false;
      }
    });
  }

  // 向下滚动加载数据的方法
  doInfinite(infiniteScroll:InfiniteScroll):void{
    if(!this.hasMore){
      infiniteScroll.complete();
      return;
    }
    setTimeout(()=>{
      this.curPage+=1;
      this.getParks(this.num,this.curPage);
      infiniteScroll.complete();
    },500)
  }
  /**
   * 下拉数据刷新
   * @param refresher 
   */
  doRefresh(refresher:Refresher):void{
    setTimeout(()=>{
      this.curPage=1;
      this.getParks(this.num,this.curPage);
      refresher.complete();
    },1000)
  }
  /**
   * 点击进入详情页面
   * @param park 
   */
  itemTapped(park:Park):void{
    this.navCtrl.push(ParkDetailPage,{park:park});
  }
  /**
   * 点击加入书架
   * @param park 
   */
  add(park:Park):void{
    // this.navCtrl.push(ParkMapPage,{park:park});
  }
  /**
   * 搜索功能
   * @param event 
   */
  searchParks(event:any):void{
    // let query:string=event.target.value;
    // if(query&&query.length>0){
    //   query=query.trim();
      
    // }
  }
  /**
   * 重新显示结果集
   * @param event 
   */
  resetParks(event:any):void{
    // this.curPage=1;
    // // this.isSearch=false;
    // this.parks=[];
    // this.getParks(this.num,this.curPage)
  }
  ngAfterViewInit(): void {
    //处理在Virtual-Scroll中的图片显示问题
    if(this._content){
      this._content.imgsUpdate=()=>{
        if(this._content._scroll.initialized&&this._content._imgs.length&&this._content.isImgsUpdatable()){
          this._content._imgs.forEach((img:Img)=>{img._rect=null});
          updateImgs(
            this._content._imgs,
            this._content._cTop*-1,
            this._content.contentHeight,
            this._content.directionY,1400,400
            );
        }
      
      }
    }
  }
}
